<template>
    <div class="main-layout"> 
        <main>
            <!-- 内容插槽，因为没有其它的插槽，所以是一个默认插槽 -->
            <slot/> 
        </main>
        <footer>
            <!-- 因为图片和文字都要变化，所以应该在这个选项上添加一个样式 -->
            <div @click="toPage(it)" 
                :class="['item', it.active ? 'active' : '']" 
                v-for="it in footerList" 
                :key="it.text">
                <i :class="[it.icon]"></i>
                <span>{{it.text}}</span>
            </div>
        </footer>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                footerList: [
                    {icon: 'home', text: '首页', active: false, path: '/home'},
                    {icon: 'types', text: '分类', active: false, path: '/types'},
                    {icon: 'videos', text: '看视频', active: false, path: '/videos'},
                    {icon: 'cart', text: '购物车', active: false, path: '/cart'},
                    {icon: 'me', text: '我的', active: false, path: '/me'}
                ]
            }
        },
        watch:{
            '$route.path':{
                // 设置立即监听
                immediate:true,
                // 处理业务
                handler(_path) {
                    console.log('------------- 当前的路由', _path)
                    this.footerList = this.footerList.map(it => {
                        it.active = it.path === _path
                        return it
                    })
                }
            }
        },
    }
</script>